<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品入库审核管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }
        .card-container {
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .toolbar {
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
            background-color: #fff;
        }
        .filter-item {
            margin-right: 10px;
        }
        .table-container {
            padding: 20px;
        }
        .el-table {
            border-radius: 4px;
            overflow: hidden;
        }
        .el-table th {
            background-color: #f7f8fa;
            font-weight: 500;
        }
        .el-table tr:hover > td {
            background-color: #fafafa !important;
        }
        .pagination-container {
            padding: 16px 20px;
            border-top: 1px solid #f0f0f0;
            text-align: right;
        }
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            line-height: 1;
        }
        .status-approved {
            background-color: #e8f4ea;
            color: #00b42a;
        }
        .status-pending {
            background-color: #fff2e8;
            color: #ff7d00;
        }
        .operation-buttons {
            display: flex;
            gap: 5px;
        }
        .page-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2d3d;
            margin-bottom: 15px;
            padding-left: 20px;
            padding-top: 10px;
        }
        .date-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .date-label {
            color: #666;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app">
    <h3 class="page-title">商品入库审核管理</h3>

    <!-- 主内容卡片 -->
    <div class="card-container">
        <!-- 工具栏 -->
        <div class="toolbar">
            <el-input v-model="searchForm.id" placeholder="请输入审核ID" style="width: 200px;" class="filter-item"></el-input>
            <el-input v-model="searchForm.productName" placeholder="商品名称" style="width: 200px;" class="filter-item"></el-input>

            <!-- 创建日期搜索 -->
            <div class="date-container">
                <span class="date-label">提交日期:</span>
                <el-date-picker
                        v-model="searchForm.createTime"
                        type="date"
                        placeholder="选择提交日期"
                        value-format="yyyy-MM-dd"
                        style="width: 200px;"
                ></el-date-picker>
            </div>

            <el-button type="primary" @click="loadData" icon="el-icon-search">
                查询
            </el-button>
            <el-button @click="resetSearch" icon="el-icon-refresh">
                重置
            </el-button>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    highlight-current-row
                    :empty-text="tableData.length === 0 ? '暂无审核记录' : ''">
                <el-table-column prop="id" label="审核ID" width="100"></el-table-column>
                <el-table-column prop="productName" label="产品名" width="140"></el-table-column>
                <el-table-column prop="quantity" label="入库数量" width="100"></el-table-column>
                <el-table-column prop="price" label="单价" width="100" :formatter="formatPrice"></el-table-column>
                <el-table-column prop="amount" label="总金额" width="120" :formatter="formatPrice"></el-table-column>
                <el-table-column prop="supplier" label="供应商" width="140"></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="{row}">
                        <span :class="row.status === 1 ? 'status-tag status-approved' : 'status-tag status-pending'">
                            {{ row.status === 1 ? '已审核' : '未审核' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="提交时间" width="160"></el-table-column>
                <el-table-column prop="approvalTime" label="审核时间" width="160">
                    <template slot-scope="{row}">
                        {{ row.approvalTime || '-' }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="120"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <div class="operation-buttons">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit1(scope.row)"
                                    :disabled="scope.row.status === 1"
                                    icon="el-icon-check">
                                通过
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleEdit2(scope.row)"
                                    :disabled="scope.row.status === 1"
                                    icon="el-icon-close">
                                不通过
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            searchForm: {
                productName: '',
                id: '',
                createTime: '' // 新增：提交日期搜索
            },
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0
        },
        created() {
            this.loadData();
        },
        methods: {
            // 格式化价格
            formatPrice(row, column, value) {
                return value ? '¥' + parseFloat(value).toFixed(2) : '¥0.00';
            },

            // 加载数据
            loadData() {
                const params = {
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                    data: {
                        productName: this.searchForm.productName,
                        id: this.searchForm.id,
                        createTime: this.searchForm.createTime // 提交日期参数
                    }
                };

                axios.post('/stockInApproval/list', params)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.tableData = response.data.data.list || [];
                            this.total = response.data.data.total || 0;
                        } else {
                            this.$message.error(response.data.msg || '加载数据失败');
                        }
                    })
                    .catch(error => {
                        console.error('请求错误:', error);
                        this.$message.error('系统错误');
                    });
            },

            // 重置搜索条件
            resetSearch() {
                this.searchForm = {
                    productName: '',
                    id: '',
                    createTime: ''
                };
                this.pageNum = 1;
                this.loadData();
            },

            // 处理页码变化
            handleCurrentChange(val) {
                this.pageNum = val;
                this.loadData();
            },

            // 处理每页条数变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.pageNum = 1; // 重置到第一页
                this.loadData();
            },

            // 审核通过
            handleEdit1(row) {
                this.$confirm('确认通过该入库审核吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                    axios.put('/stockInApproval/update', row)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('审核已通过');
                                this.loadData();
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error('系统错误');
                        });
                }).catch(() => {
                    this.$message.info('已取消审核操作');
                });
            },

            // 审核不通过
            handleEdit2(row) {
                this.$confirm('确认不通过该入库审核吗？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    axios.put('/stockInApproval/update2', row)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('已标记为不通过');
                                this.loadData();
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error('系统错误');
                        });
                }).catch(() => {
                    this.$message.info('已取消审核操作');
                });
            }
        }
    });
</script>
</body>
</html>
